﻿@model InShare.Model.UserEntity

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutHome.cshtml";
}

@section head {
    <style type="text/css">
        .top1 .top1Left {
            margin: 0px auto;
            width: 400px;
            height: 150px;
        }

            .top1 .top1Left a {
            }

        .top1Left ul li {
            float: left;
            margin-right: 30px;
            margin-top: 5px;
        }

        .center .centerTop .top2 {
            /*width: 1000px;*/
            height: 50px;
            margin-top: 40px;
        }

        .top2 ul li {
            float: left;
            margin-top: 10px;
            margin-left: 220px;
            font-size: 20px;
            list-style: none;
        }

        .top2 b {
            color: black;
            margin-left: 200px;
            list-style: none;
        }

        .center .centerOther {
            margin-top: 10px;
            /*width: 1200px;*/
            border: solid 1px red;
        }


        .t1, .t2, .t3, .t4, .t5, .t6, .t7 {
            width: 400px;
            height: 38px;
            margin: 0px auto;
            margin-top: 4px;
            position: relative;
            border: 1px solid #ddd;
        }

        #main {
            margin-top: -5em;
        }

        #tiles li {
            width: 350px;
            height: 310px;
            float: left;
            margin: 10px 25px;
        }

            #tiles li img {
                height: 100%;
            }

        #userBoxShow {
            display: none;
            width: 460px;
            height: 400px;
            left: 32.5%;
            top: 150px;
            position: fixed;
            border: solid 1px black;
            background: #fff;
            /*border-radius: 5px;*/
            padding-top: 10px;
            font: 12px/1.5 \5b8b\4f53;
        }

            #userBoxShow #boxTitle {
                margin-top: -10px;
                position: fixed;
                height: 40px;
                width: 460px;
                font-size: x-large;
                font-weight: bold;
                background: #F0EFEE;
            }

                #userBoxShow #boxTitle #boxTitleTxt {
                    /*font-size: x-large;
                    font-weight: bold;*/
                }

            #userBoxShow ul {
                margin-top: 30px;
            }

                #userBoxShow ul li {
                    margin-top: 20px;
                    border-bottom: 1px solid black;
                }

                    #userBoxShow ul li img {
                        height: 100%;
                        width: 44px;
                    }

                    #userBoxShow ul li p {
                        /*float: left;*/
                    }

                    #userBoxShow ul li .user-name {
                        font-size: large;
                    }

                    #userBoxShow ul li .user_info {
                        display: inline-block;
                    }

                    #userBoxShow ul li .btnFollow {
                        float: right;
                        padding: 5px;
                        margin-top: 8px;
                    }
    </style>
}

<div class="myIndex">
    <div class="center">
        <div class="centerTop">
            <div class="top1">
                <div style="position: absolute;height:150px;width:150px;margin-left:250px;">
                    <img id="profilePic" style="border-radius:50%;" src="@Model.ProfilePic" />
                </div>
                <div class="top1Left">
                    <text style="font-size:xx-large;" id="user-name">@Model.UserName</text>
                    @if (Model.Id == Convert.ToInt64(Session["userId"]))
                    {
                    <button type="button" style="position: relative; float: right; font-size: x-large; margin-top: 5px; cursor: pointer;" id="btn_edit">edit profile</button>
                    }
                    else
                    {
                        if (ViewBag.Following)
                        {
                    <button type="button" style="position: relative; float: right; font-size: x-large; margin-top: 5px; cursor: pointer;" onclick="handleClick(this)">Following</button>
                    <input type="hidden" value="1" id="followValue" />
                        }
                        else
                        {
                    <button type="button" style="position: relative; float: right; font-size: x-large; margin-top: 5px; cursor: pointer;" onclick="handleClick(this)">Follow</button>
                    <input type="hidden" value="0" id="followValue" />
                        }
                    }
                    <ul style="width: 100%; height: 30px; padding: 10px 0px;">
                        <li>following <span id="following-count" style="cursor: pointer;">@ViewBag.FollowingCount</span> </li>
                        <li>follower <span id="follower-count" style="cursor: pointer;">@ViewBag.FollowerCount </span></li>
                        <li>posts <span id="post-count">@ViewBag.PostCount</span></li>
                        <input type="hidden" value="@ViewBag.PostCount" id="postCount" />
                    </ul>
                    <ul>
                        <li><span id="full-name">@Model.FullName</span> | <span id="biography">@Model.Biography</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" value="1" id="pageIndex" />
<!---start-content---->
<div class="content">
    <div class="wrap">
        <div id="main" role="main">
            <ul id="tiles">
                <!-- These are our grid blocks -->
                @foreach (var post in ViewBag.PostList)
                {
                    <li onclick="location.href='/Post/@post.ShortCode';">
                        <img src="@post.DisplayUrl">
                    </li>
                }
                <!-- End of grid blocks -->
            </ul>
        </div>
    </div>
</div>
<!---End-content---->
<!--start-followBox-->
<div id="userBoxShow">
    <div id="boxTitle">
        <span id="boxTitleTxt"></span><span id="cancelBtn" style="float:right;cursor: pointer;">×</span>
        <input type="hidden" value="0" id="followPageIndex" />
    </div>
    <div id="boxFollow" style="overflow: auto;height:100%;">
        <ul id="followUser">
            @*<li>
                    <a href="#">
                        <img src="~/Content/img/UserPhoto.jpg" />
                        <div class="user_info">
                            <p class="user-name">用户名</p><p>简介</p>
                        </div>
                    </a>
                    <input type="button" class="btnFollow" value="Follow" onclick="followClick(123456456)" />
                </li>*@
        </ul>
    </div>
</div>
<!--end-followBox-->

@section script {
    <!----wookmark-scripts---->
    <script src="~/Content/js/jquery.imagesloaded.js"></script>
    <script src="~/Content/js/jquery.wookmark.js"></script>
    <script type="text/javascript">
        var isLoading = false;
        (function ($) {
            var $tiles = $('#tiles'),
                $handler = $('li', $tiles),
                $main = $('#main'),
                $window = $(window),
                $document = $(document),
                options = {
                    autoResize: true, // This will auto-update the layout when the browser window is resized.
                    container: $main, // Optional, used for some extra CSS styling
                    offset: 20, // Optional, the distance between grid items
                    itemWidth: 280 // Optional, the width of a grid item
                };
            /**
             * Reinitializes the wookmark handler after all images have loaded
             */
            function applyLayout() {
                $tiles.imagesLoaded(function () {
                    // Destroy the old handler
                    if ($handler.wookmarkInstance) {
                        $handler.wookmarkInstance.clear();
                    }
                    // Create a new layout handler.
                    $handler = $('li', $tiles);
                    $handler.wookmark(options);
                });
            }
            /**
             * When scrolled all the way to the bottom, add more tiles
             */
            function onScroll() {
                // Check if we're within 100 pixels of the bottom edge of the broser window.
                //var winHeight = window.innerHeight ? window.innerHeight : $window.height(), // iphone fix
                //    //$window.scrollTop() 滚动条距顶部距离(页面超出窗口的高度)
                closeToBottom = $(document).scrollTop() >= $(document).height() - $(window).height();

                var loadedCount = $("#tiles").children("li").length;
                if (closeToBottom && loadedCount >= 6) {
                    if (isLoading) {
                        return;
                    }
                    var pageIndex = $("#pageIndex").val();
                    var postCount = $("#postCount").val();
                    if (postCount == loadedCount) {
                        return;
                    }
                    var userId = parseInt(window.location.pathname.replace(/[^0-9]/ig, ""));
                    isLoading = true;
                    //发送加载下一页请求
                    $.ajax({
                        url: "/User/Load", dataType: "json",
                        type: "post", data: { userId: userId, pageIndex: ++pageIndex },
                        success: function (res) {
                            if (res.Status == "OK") {
                                $("#pageIndex").val(pageIndex);
                                for (var i = 0; i < res.Data.length; i++) {
                                    var postUrl = "location.href='/Post/" + res.Data[i].ShortCode + "';";
                                    $tiles.append('<li onclick="' + postUrl + '"><img src="' + res.Data[i].DisplayUrl + '"></li>');
                                    applyLayout();
                                }
                            } else {
                                $("#pageIndex").val(--pageIndex);
                            }
                            isLoading = false;
                        }, error: function () {
                            $("#pageIndex").val(--pageIndex);
                            isLoading = false;
                        }
                    });
                }
            };

            // Call the layout function for the first time
            applyLayout();

            // Capture scroll event.
            $window.bind('scroll.wookmark', onScroll);
        })(jQuery);

        $(document).ready(function () {
            $(window).scroll(function () {
                //$(document).scrollTop() 获取垂直滚动的距离
                //$(document).scrollLeft() 这是获取水平滚动条的距离
                //if ($(document).scrollTop() <= 0) {
                //    alert("滚动条已经到达顶部为0");
                //}
                if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
                    //alert("滚动条已经到达底部为" + $(document).scrollTop());
                }
            });
        });
    </script>
    <!----//wookmark-scripts---->

    <script>
        var isLoading = false;
        var userId = parseInt(window.location.pathname.replace(/[^0-9]/ig, ""));
        $(function () {
            $("#following-count").click(function () {
                $("#boxTitleTxt").text("Following");
                $("#userBoxShow").show();
                var followingCount = $("#following-count").text();
                loadFollowData("/User/LoadFollowing", followingCount);
                scrollFun(followingCount);
            });
            $("#follower-count").click(function () {
                $("#boxTitleTxt").text("Follower");
                $("#userBoxShow").show();
                var followerCount = $("#follower-count").text();
                loadFollowData("/User/LoadFollower", followerCount);
                scrollFun(followerCount);
            });
            $("#cancelBtn").click(function () {
                $("#followUser").html("");
                $("#userBoxShow").hide();
                $("#followPageIndex").val(0);
            });
        });

        //滚动条加载
        function scrollFun(count) {
            $("#boxFollow").scroll(function () {
                if ($("#boxFollow").scrollTop() >= $("#userBoxShow").height()) {
                    //alert("滚动条已经到达底部为" + $("#followUser").scrollTop());
                    var url = "";
                    if ($("#boxTitleTxt").text() == "Following") {
                        url = "/User/LoadFollowing";
                    }
                    else {
                        url = "/User/LoadFollower";
                    }
                    loadFollowData(url, count);
                }
            });
        }
        //加载follow数据
        function loadFollowData(url, count) {
            var followPageIndex = $("#followPageIndex").val();
            var loadedCount = $("#followUser").children("li").length;
            if (isLoading || count == loadedCount) {
                return;
            }
            isLoading = true;
            $.post(url, { userId: userId, pageIndex: ++followPageIndex },
                function (res) {
                    if (res.Status == "OK") {
                        var accountId = $("#accountId").val();
                        var data = "";
                        for (var i = 0; i < res.Data.length; i++) {
                            var isFollowing = res.Data[i].IsFollowing ? 'Following' : 'Follow';
                            var buttonHtml = "";
                            if (accountId != res.Data[i].Id) {
                                buttonHtml = '<input type="button" class="btnFollow" value="' + isFollowing + '" onclick="followClick(' + res.Data[i].Id + ',' + res.Data[i].IsFollowing + ')" />';
                            }
                            data += '<li id= "' + res.Data[i].Id + '"><a href="/User/' + res.Data[i].Id + '"><img src= "' + res.Data[i].ProfilePic + '" /><div class="user_info"><p class="user-name">' + res.Data[i].UserName + '</p><p>' + res.Data[i].Biography + '</p></div></a>' + buttonHtml + '</li>';
                        }
                        if (followPageIndex == 1) {
                            $("#followUser").html(data);
                        }
                        else {
                            $("#followUser").append(data);
                        }
                        $("#followPageIndex").val(followPageIndex);
                    }
                    isLoading = false;
                });
        }

        //follow列表关注或取消关注
        function followClick(followId, isFollowing) {
            var url = "";
            if (isFollowing) {
                //取消关注
                url = "/User/Unfollow";

            }
            else {
                //点击关注
                url = "/User/Follow";
            }
            followOperation(followId, url, isFollowing);
        }
        //follow操作
        function followOperation(followId, url, isFollowing) {
            $.post(url, { userId: followId },
                function (res) {
                    if (res.Status == "OK") {
                        if (isFollowing) {
                            $("#" + followId).children("input").val("Follow").removeAttr("onclick").attr("onclick", "followClick(" + followId + "," + !isFollowing + ")");
                        }
                        else {
                            $("#" + followId).children("input").val("Following").removeAttr("onclick").attr("onclick", "followClick(" + followId + "," + !isFollowing + ")");
                        }
                    }
                    if (res.Status == "Error") {
                        alert(res.ErrorMsg);
                    }
                });
        }
        //按钮点击
        function handleClick(ev) {
            var isFollow = $("#followValue").val();
            var url = "";
            if (isFollow == 1) {
                url = "/User/Unfollow";
            }
            else {
                url = "/User/Follow";
            }
            $.post(url, { userId: userId },
                function (res) {
                    if (res.Status == "OK") {
                        if (isFollow == 1) {
                            $("#followValue").val("0");
                            ev.textContent = "Follow";
                        }
                        else {
                            $("#followValue").val("1")
                            ev.textContent = "Following";
                        }
                        loadUserInfo();
                    }
                    if (res.Status == "Error") {
                        alert(res.ErrorMsg);
                    }
                });
        }

        //加载用户信息
        function loadUserInfo() {
            $.post("/User/LoadUserInfo", { userId: userId },
                function (res) {
                    if (res.Status == "OK") {
                        $("#user-name")[0].innerText = res.Data.UserName;
                        $("#full-name")[0].innerText = res.Data.FullName;
                        $("#profilePic")[0].innerText = res.Data.ProfilePic;
                        $("#biography")[0].innerText = res.Data.Biography;
                        $("#following-count")[0].innerText = res.Data.FollowingCount;
                        $("#follower-count")[0].innerText = res.Data.FollowerCount;
                        $("#post-count")[0].innerText = res.Data.PostCount;
                    }
                });
        }
    </script>

}
